<template>
    <view>
        <view class="comment-container">
            <!-- 打分 -->
            <view class="comment-info-container">
                <!-- 门店评论 -->
                <view class="grade-container">
                    <view>
                        <view>
                            <text class="store-grade">店铺评分</text>
                        </view>
                        <text class="store-grade">发型师评分</text>
                    </view>
                    <view>
                        <view>
                            <l-rate :disabled="true" :score="comment.server" size="28" :item-gap="10" active-color="orange" inactive-color="white" />
                        </view>
                        <l-rate :disabled="true" :score="comment.stylistSkill" size="28" :item-gap="10" active-color="orange" inactive-color="white" />
                    </view>
                    <view>
                        <view>
                            <text class="store-grade">{{ shopevaluate }}</text>
                        </view>
                        <text class="store-grade">{{ serverevaluate }}</text>
                    </view>
                </view>
                <!-- <view>
        <view class="user-info"  wx:if="{{!comment.reply}}">
          <image class="headerimg " src="{{comment.headImg}}"></image>
          <view class="user-info-detail order-detail-flex14">
            <view class="user-info-detail-name">{{comment.nickname}} <text class="user-info-detail-gener">{{generDesc}}</text></view>
            <view>
              <l-rate score="{{comment.server}}" size="28" item-gap="10" active-color="orange" inactive-color="white" />
            </view>
          </view>
          <view class="order-detail-flex5 order-list-order-state-text">
            {{serverevaluate}}
          </view>
        </view>
      </view> -->
            </view>
            <!-- 照片 -->
            <view class="comment-info-container">
                <text class="user-comment">{{ comment.comment }}</text>
                <l-grid l-class="grid" row-num="3">
                    <l-grid-item :key="index" :slot="index" :data-item="item" @tap.native="previewImg($event, { item })" v-for="(item, index) in comment.imgPaths">
                        <image class="picture" mode="aspectFill" :src="item" :data-item="item.imgPaths" :data-index="index"></image>
                    </l-grid-item>
                </l-grid>
                <text class="user-comment-time">{{ comment.createtime }}</text>
                <!-- 发型师评论 -->
                <view class="comment" v-if="comment.stylietReply">
                    <text class="coment-menu">美发师：</text>
                    <text class="coment-content">{{ comment.stylietReply }}</text>
                </view>
                <!-- 门店评论 -->
                <view class="comment" v-if="comment.reply">
                    <text class="coment-menu">门店：</text>
                    <text class="coment-content">{{ comment.reply }}</text>
                </view>
                <view class="comments" v-if="!comment.reply">
                    <text class="coment-menu">门店：</text>
                    <input class="coment-content" placeholder="可以发表一下感言" @input="onComfirm" :data-id="comment.id" />
                    <button size="mini" @tap="submitComment" style="margin-left: 10px" :data-id="comment.id">提交</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/commentdetail/commentdetail.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

import { getitle } from '../../utils/util.js';
export default {
    data() {
        return {
            comment: {
                server: '',
                stylistSkill: '',
                comment: '',
                imgPaths: [],
                createtime: '',
                stylietReply: '',
                reply: '',
                id: ''
            },

            pictures: [
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    url: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                }
            ],

            storeComent: false,
            commentList: '',
            serverDesc: '',
            generDesc: '',
            shopevaluate: '',
            serverevaluate: '',
            orderId: '',
            storeReviewsId: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let orderId = options.orderId;
        this.setData({
            orderId
        });
        this.getOrderComment(orderId);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 查看评价信息
        getOrderComment(orderId) {
            _request
                .get('/storeComment/getOrderComment', {
                    orderId: orderId
                })
                .then((res) => {
                    if (res.data.data) {
                        let generDesc = '';

                        if (res.data.data.gener > 1) {
                            generDesc = '女';
                        } else {
                            generDesc = '男';
                        }

                        let comm = res.data.data;

                        if (comm) {
                            comm.comment = decodeURIComponent(comm.comment || '');
                            comm.stylietReply = decodeURIComponent(comm.stylietReply || '');
                            comm.reply = decodeURIComponent(comm.reply || '');
                        }

                        this.setData({
                            comment: comm,
                            generDesc: generDesc,
                            shopevaluate: getitle(res.data.data.server),
                            serverevaluate: getitle(res.data.data.stylistSkill)
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        onComfirm(event) {
            console.log('----event: ', event);
            const list = this.comment;
            let storeReviewsId = event.currentTarget.dataset.id;

            if (list.id === storeReviewsId) {
                list.storeReply = event.detail.value;
            }

            this.setData({
                commentList: list
            });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        /* 提交 */
        submitComment(e) {
            // console.log(e)
            let storeReviewsId = e.currentTarget.dataset.id;
            const self = this;
            const list = self.comment; // console.log(list)

            let commentList = '';

            if (list.id === storeReviewsId) {
                commentList = list.storeReply;
            }

            if (!commentList) {
                uni.showToast({
                    title: '内容不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } //将emoji表情进行转义再发送至后台

            let regex =
                /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
            let commentNew = commentList.replace(regex, function (res) {
                return encodeURIComponent(res);
            });

            _request
                .postObj('/storeComment/replyStoreComment', {
                    storeReviewsId: storeReviewsId,
                    context: commentNew
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const list = self.comment;

                        if (list.id === storeReviewsId) {
                            list.reply = commentList;
                        }

                        self.setData({
                            comment: list,
                            storeReviewsId: storeReviewsId
                        });
                    } else {
                        if (res.data.message.indexOf('敏感词') > -1) {
                            uni.showToast({
                                title: '包含敏感词汇、无效回复',
                                icon: 'error',
                                duration: 2000
                            });
                        }
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
.comment-container {
    display: flex;
    flex-direction: column;
}

.comment-info-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin: 10rpx 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.grade-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 10rpx;
}
.store-grade {
    font-size: 28rpx;
}
.grade-name {
    font-size: 28rpx;
    color: #999999;
}

.user-comment {
    display: flex;
    font-size: 24rpx;
    margin-left: 10rpx;
    text-align: left;
}
.user-comment-time {
    display: flex;
    font-size: 24rpx;
    margin-left: 10rpx;
    text-align: right;
    margin-top: 10rpx;
}
/* 照片 */
.picture {
    width: 180rpx;
    height: 220rpx;
}

.comment {
    margin-top: 20rpx;
    padding: 10rpx;
    background-color: #fbfbfb;
}
.comments {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
    padding: 10rpx;
    background-color: #fbfbfb;
}
.coment-menu {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
}
.coment-content {
    font-size: 28rpx;
    color: #999999;
    flex: 1;
}
.user-info {
    display: flex;
    flex-direction: row;
}
/* 头像 */
.headerimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
}

.user-info-detail {
    margin-left: 40rpx;
}
.order-detail-flex14 {
    flex: 14;
}
.user-info-detail-name {
    font-weight: 700;
}
.user-info-detail-gener {
    font-size: 28rpx;
    color: #666666;
}
.order-detail-flex5 {
    flex: 5;
}
.order-list-order-state-text {
    font-size: 28rpx;
    text-align: right;
    color: #666666;
    margin-top: 40rpx;
}
</style>
